<template>
	<view>
		<view class="presentation">
			<text class="subtitle" >Countdown-verify </text>
			<text class="describe">短信验证码倒计时，可重置，可设置样式。</text>
		</view>
		<view class="list">
			<text>默认使用</text>
			<countdown-verify ref="countdownVerify1" @sendCode="sendCode(1)"></countdown-verify>
		</view>
		<view class="list">
			<text>默认为倒计时状态</text>
			<countdown-verify :start="true" ref="countdownVerify2" @sendCode="sendCode(2)"></countdown-verify>
		</view>
		<view class="list">
			<text>设置圆角</text>
			<countdown-verify :borderRadius="20" ref="countdownVerify3" @sendCode="sendCode(3)"></countdown-verify>
		</view>
		<view class="list">
			<text>设置大小</text>
			<countdown-verify :width="100" :height="35" :borderColor="'#333'" ref="countdownVerify4" @sendCode="sendCode(4)"></countdown-verify>
		</view>
		<view class="list">
			<text>设置秒数为120</text>
			<countdown-verify :second="120" ref="countdownVerify5" @sendCode="sendCode(5)"></countdown-verify>
		</view>
		<view class="list">
			<text>设置文本</text>
			<countdown-verify :textMsg="textMsg" ref="countdownVerify6" @sendCode="sendCode(6)"></countdown-verify>
		</view>
		<view class="list">
			<text>发送失败或参数错误重置</text>
			<countdown-verify ref="countdownVerify7" @sendCode="sendCode(7)"></countdown-verify>
		</view>
		<view class="list">
			<text>设置颜色</text>
			<countdown-verify :bgColor="'rgb(7, 193, 96)'" :fontColor="'#FFF'" ref="countdownVerify8" @sendCode="sendCode(8)"></countdown-verify>
		</view>
	</view>
</template>
<script>
	import countdownVerify from '../../components/ker-countdown-verify/ker-countdown-verify.vue'
	export default {
		components:{
			countdownVerify
		},
		data() {
			return {
				textMsg:{
				   sendfront:'发送短信验证码',
				   sendCenter:'发送中...',
				   sendAfter:'后重新发送'
			   }
			}
		},
		methods: {
			sendCode(index){
				console.log('短信发送成功')
				switch (index){
					case 1:
						setTimeout(() => {
							this.$refs.countdownVerify1.sendSucceed()
						},1000)
						break;
					case 2:
						setTimeout(() => {
							this.$refs.countdownVerify2.sendSucceed()
						},1000)
						break
					case 3:
						setTimeout(() => {
							this.$refs.countdownVerify3.sendSucceed()
						},1000)
						break
					case 4:
						setTimeout(() => {
							this.$refs.countdownVerify4.sendSucceed()
						},1000)
						break
					case 5:
						setTimeout(() => {
							this.$refs.countdownVerify5.sendSucceed()
						},1000)
						break
					case 6:
						setTimeout(() => {
							this.$refs.countdownVerify6.sendSucceed()
						},1000)
						break
					case 7:
						console.log('请填写正确的手机号')
						setTimeout(() => {
							this.$refs.countdownVerify7.stopTime()
						},1000)
						break
					case 8:
						setTimeout(() => {
							this.$refs.countdownVerify8.sendSucceed()
						},1000)
						break
				}
			}
		},
		mounted() {
			
		}
	}
</script>
<style lang='scss' scoped>
	.presentation {
		display: flex;
		flex-direction: column;
		background-color: #f1f1f1;
		padding: 20px 40px;

		.subtitle {
			font-size: 18px;
			font-weight: bold;
			color: #333;
		}

		.describe {
			font-size: 14px;
			color: #999;
		}
	}
	.list{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 20px;
		color: #333;
		border-top: 10px solid #f1f1f1;
	}
</style>
